<template>
    <div>
        <div class="inviteSearch">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo"></use>
            </svg>
            <div class="line"></div>
            <input type="text" placeholder="输入客户姓名/手机号查询" v-on:focus="onFocus =true" v-model="searchString">
            <button v-show="onFocus" class="searchBtn" v-on:click="search">确定</button>
        </div>
        <div class="inviteList">
            <div class="yejiListRow" v-for="item of clientList" :key="item.id">
                <router-link :to="{ name: 'clientDetail', params: { clientId: item.id, sumInvest:item.totalInvestMoney,recommand:item.recommandPersonNum}}">
                    <div class="bidNameBox">
                        <span class="line"></span>
                        <span>{{item.truename || item.telphone}}</span>
                        <span class="bidName">一级推荐</span>
                        <!-- <span class="pull-right">2017.07.03起息</span> -->
                    </div>
                    <div class="bidNamePrice">
                        <div>
                            <span>{{item.totalInvestMoney}}</span>
                            <p>累计投资</p>
                        </div>
                        <span class="line"></span>
                        <div class="color">
                            <span>{{item.recommandPersonNum}}人</span>
                            <p>二级推荐</p>
                        </div>
                        <span class="line"></span>
                        <div @contextmenu.prevent="tel(item.telphone)">
                            <span>{{item.telphone}}</span>
                            <p>联系电话</p>
                        </div>
                    </div>
                </router-link>
            </div>
            <div class="moreBtn" @click="getlist">{{noMore}}</div>
        </div>
    </div>
</template>
<script>
import subInvite from "@/components/subInvite"
import titleJs from "@/router/title.js"
import qs from "qs"

export default {
    components: { 'subInvite': subInvite },
    data: function () {
        return {
            onFocus: false,
            isMobile: 1,
            memberId: window.localStorage.memberId,
            clientList: [],
            page: 1,  // 当前页码
            limit: 10, // 每页条数
            dataLength: 16,
            searchString: "",
            loadType: false,
            noMore: "点击加载更多",
        }
    },
    mounted() {
        this.getlist()
    },
    methods: {
        doClick(event) {
            titleJs.$emit('titleSpring', event);
        },
        getlist() {
            this.noMore = "正在加载数据中";
            if (this.loadType) {
                return
            }
            // if (this.page * this.limit >= this.dataLength + this.limit) {
            //     this.noMore = "没有更多数据了";
            //     return
            // }
            this.loadType = true;
            let param = {
                isMobile: this.isMobile,
                memberId: this.memberId,
                page: this.page,
                limit: this.limit
            }
            this.$ajax.post("/salesman/getInvestInfoBySalesman.do", qs.stringify(param)).then(response => {
                this.loadType = false;
                this.noMore = "点击加载数据";
                if (response.data.data.length == 0) {
                    this.noMore = "没有更多数据了";
                    return
                }
                this.clientList = this.clientList.concat(response.data.data);
                this.page++
            })
        },
        search() {
            let truename, telphone;
            let searchString = parseInt(this.searchString);
            if (isNaN(searchString)) {
                truename = this.searchString
            } else {
                telphone = searchString
            }
            let param = {
                isMobile: this.isMobile,
                memberId: this.memberId,
                page: 1,
                limit: 20,
                truename: truename,
                telphone: telphone
            }
            param = qs.stringify(param);
            this.$ajax.post("/salesman/getInvestInfoBySalesman.do", param).then(retData => {
                this.clientList = retData.data.data;
                this.onFocus = false
            })
        }
    }

}

</script>
<style>
.inviteSearch {
    width: 91%;
    margin: .33rem auto
}

.inviteSearch {
    height: .89rem;
    display: flex;
    align-items: center;
}

.inviteSearch .icon,
.inviteSearch .line {
    position: absolute;
    left: .7rem
}

.inviteSearch .icon {
    color: #333a4b;
    font-size: .4rem
}

.inviteSearch .line {
    height: .4rem;
    left: 1.3rem
}

.inviteSearch input {
    border: none;
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    border-radius: 10px;
    font-size: .25rem
}

.bidName {
    color: #eb654f;
    display: inline-block;
    font-size: .2rem;
    border: 1px solid;
    padding: 0.066rem 0.113rem;
    margin-left: .25rem;
}

.bidNamePrice>div {
    text-align: center
}

.bidNamePrice p {
    font-size: .2rem;
    color: #999
}

.yejiListRow>a {
    color: #333a4b
}

.searchBtn {
    border: none;
    background: #333a4b;
    color: white;
    width: 1rem;
    font-size: .2rem;
    border-radius: 10px;
    padding: .2rem;
    margin-left: .5rem
}
</style>
